<template>
  <div>
    <slot name="foo" @slotchange="handleSlotChange"></slot>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  const el = document.querySelector('el-to-observe');
  const getSlotContent = () => el.querySelector('[slot]')?.tagName || 'Nothing';
  const callback = () => console.log(getSlotContent() + 'was slotted');

  observer = new MutationObserver(callback);
  observer.observe(el, {
    childList: true,
    subtree: true
  });
});

onUnmounted(() => observer?.disconnect())
//https://stackoverflow.com/questions/74102114/how-to-watch-for-external-slot-changes
</script>
<style lang="">

</style>